import { Col, Row } from 'antd'
import React from 'react'

const getWidth = (flex, flexNum, defaultTotal = 3) => {
  const totals = flex.reduce((total, item) => total + item, 0) || defaultTotal
  return `${100 / totals * flexNum}%`
}

const FormRow = ({ children, flex = [], gutter = 24, ...rowProps }) => {
  return (
    <Row type="flex" {...rowProps} gutter={gutter}>
      {React.Children.map(children, (child, i) => (
        <Col
          style={{
            flex: flex[i] ? `${flex[i]}` : '1',
            width: getWidth(flex, flex[i] || 1, children.length),
          }}
        >
          {child}
        </Col>
      ))}
    </Row>
  )
}

export default FormRow
